<template>
   <div class="scopePage cancelPadding">
     <div class="toolbox">
          <span>时间选择 : </span>&nbsp;
          <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>&emsp;&emsp;
          <span>所属地区 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
          <span>所属流域 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
          <span>监测项目 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value" placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
         
     </div>
     <div class="toolbox">
        <span>站点类别 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value" placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
           <span>站点类型 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value"   placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
           <span>运维单位 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value" placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
           <span>站点名称 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value"   placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
           <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
    </div>
    <div class="table">
          <el-table border :data="tableData">
                <el-table-column type='index' label='序号' width='45' fixed></el-table-column>
                <el-table-column  label='区域' prop='area' width='120' fixed></el-table-column>
                <el-table-column  label='水系' width='120' fixed></el-table-column>
                <el-table-column  label='河流名称' width='120' fixed></el-table-column>
                <el-table-column  label='站点名称' width='175' fixed></el-table-column>
                <el-table-column  label='审核内容' width='120' fixed>
                        <template>
                          <div>
                                <p class="cellp">监测数据</p>
                                <p class="cellp">水质类别</p>
                          </div>
                        </template>
                </el-table-column>
                <el-table-column :label='item.name' v-for="(item,key) in tableHead" :key="key">
                      <el-table-column label='浓度范围' width='95'>
                              <template>
                                <div>
                                      <p class="cellp">14.1</p>
                                      <p class="cellp"></p>
                                </div>
                              </template>
                      </el-table-column>
                      <el-table-column label='均值' width='95'>
                              <template>
                                <div>
                                      <p class="cellp">14.2</p>
                                      <p class="cellp"></p>
                                </div>
                              </template>
                      </el-table-column>
                </el-table-column>
                <el-table-column label='综合水质类别'>
                      <el-table-column label='范围' width='95'>
                              <template>
                                <div>
                                      <p class="cellp">14.1</p>
                                      <p class="cellp"></p>
                                </div>
                              </template>
                      </el-table-column>
                      <el-table-column label='均值' width='95'>
                              <template>
                                <div>
                                      <p class="cellp">14.2</p>
                                      <p class="cellp"></p>
                                </div>
                              </template>
                      </el-table-column>
                </el-table-column>
          </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dateRange: "",
      value:'',
       optionData: [
          { value: 1, label: "水温" },
          { value: 2, label: "pH" },
          { value: 3, label: "溶解氧" },
          { value: 4, label: "电导率" },
          { value: 5, label: "浊度" },
          { value: 6, label: "高锰酸盐" },
          { value: 7, label: "氨氮" },
          { value: 8, label: "总磷" },
          { value: 9, label: "总氮" },
          { value: 10, label: "叶绿素α" },
          { value: 11, label: "藻密度" },
        ],
      tableData:[{area:''}],
      tableHead:[],
      monitorFactor:[1,2,3,4,5,6,7,8,9],
    };
  },
  created() {
    this.$store.commit("setShowlefttree", true);
    this.search()
  },
  methods:{
      selectChange(arr){
          this.monitorFactor=arr;
      },
      //查询
      search(){
          this.tableHead=[];
          for(let i in this.monitorFactor){
              for(let j in this.optionData){
                  if(this.monitorFactor[i] == this.optionData[j].value){
                      this.tableHead.push({
                          name:this.optionData[j].label
                      })
                  }
              }
          }
      }
  }
};
</script>

<style scope lang="less">
.scopePage {
}
</style>
